<template>
  <el-dialog  title="设置角色" :visible.sync="showDialog" width="50%">
    <el-checkbox-group v-model="checkList">
      <!-- label的值会给v-model绑定的变量 -->
      <el-checkbox v-for="item in allRoleList" :key="item.id" :label="item.id" >{{item.name}}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer">
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="btnOK">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getRoleList } from '@/api/setting'
import { getUserDetailById,assignRoles } from '@/api/user'
export default {
  name:'AssignRole',
  data() {
    return {
      showDialog: false,
      allRoleList:[], // 所有角色
      checkList:[], // 选中角色
      userId:'' // 当前用户的ID
    }
  },
  methods: {
    // 获取所有的角色
    async getAllRoleList() {
      let {rows} = await getRoleList({ page: 1, pagesize: 1000  })
      this.allRoleList = rows
    },
    // 获取当前用户的角色
    async getUserRole(id){ // 用户id
      this.userId = id
      let { roleIds } = await getUserDetailById(id)
      this.checkList = roleIds
    },
    // 用户修改角色
    async btnOK(){
      await assignRoles({
        id:this.userId,
        roleIds:this.checkList
      })
      this.$message.success('关联成功')
      this.showDialog = false
    }
  },
}
</script>
<style>
</style>